<template>
    <div class="container">
        <progress :percent="percent" activeColor="#f94700" />
        <p>{{year}}年已经过去了{{day}}天 {{percent}}%</p>
    </div>
</template>

<script>
export default {
  methods: {
    isLeapYear() {
      let year = new Date().getFullYear();
      if (year % 400 === 0) {
        return true
      } else if (year & (4 === 0) && year % 100 !== 0) {
        return true
      } else {
        return false
      }
    },
    //获取全年天数
    getDayofYear() {
      return this.isLeapYear() ? 366 : 365
    }
  },
  computed: {
    year() {
      return new Date().getFullYear()
    },
    day() {
      let start = new Date()
      start.setMonth(0)
      start.setDate(1)
      let end = new Date()
      let offset = end.getTime() - start.getTime()
      return offset / 1000 / 60 / 60 / 24
    },
    percent() {
       return (this.day*100/this.getDayofYear()).toFixed(1)
    }
  }
};
</script>

<style lang="stylus" scoped>
.container 
    text-align: center
    margin: 30rpx 0 50rpx
    progress
        margin-bottom 20rpx
</style>
